@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');

body {
		background-color: #D5D1C9;
		color: black;
		overflow-x: hidden;
		font-family: 'Alegreya SC', serif;
		display: flex;


		overflow: hidden;
	}
	ul {
		padding-left: 0;
		margin-top: 0;
	}
	ul li {
		padding: .6em;
		list-style-type: none;
		border-radius: 9px;
		color: black;
	}
	.col-xs-4 {
		padding: 0;
	}
	li {
		display: flex;
	}
	.tab { margin-left: 40px; }
	li .one {
		width: 100%;
		color: black;
	}
	li .four {
		width: 25%;
		color: #544E61;
		font-family: 'Alegreya', serif;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.panel-group .panel {
	    border-radius: 9px;
	    box-shadow: none;
	    background-color: #F0ECE4;
	    margin: 5px;
	}
	.panel-default {
		border: none 
	}
	.panel-default > .panel-heading {
	    padding: 0;
	    border-radius: 9px;
	    background-color: #F0ECE4;
	    color: black;
	}
	.panel-defaultfs > .panel-heading {
		padding-top: 0.2em;
		padding-bottom: 0.45em;
	    /*border-radius: 9px;*/
	    /*background-color: #F0ECE4;*/
	    color: black;
	}
	.panel-title {
	    font-size: 14px;
	}

	.panel-title > a {
	    display: block;
	    text-decoration: none;
	    border-radius: 9px;
	}
	.more-less {
	    float: right;
	    /*padding: .5em;*/
	    color: #544E61;
	}
	.panel-default > .panel-heading + .panel-collapse > .panel-body {
		font-family: 'Alegreya', serif;
	    border-top-color: #EEEEEE;
	}
	.rotate180 {
		transform: rotate(180deg);
	}
	.purple {
		color: #544E61;
	}
	.large {
		font-size: 2em;
		padding: 5px;
	}
	.namjoon {
		border-radius: 10px;
		background-color: #F0ECE4;
		vertical-align: super;
		padding: .25em;
		width: 80%; 
		display: inline-block;
	}
	.physical, .meaningful, .mention {
		color: #544E61;
	}
	.physical::before,
	.meaningful::before,
	.mention::before {
	    content: "-";
	    color: #9b87ff;
	    background-color: #9b87ff;
	    width:5px;
	    height: 2em;
	    margin-right: 10px;
	    padding-top: 5px;
	    padding-bottom: 5px;
	}
	.p-tb-7.physical::before,
	.p-tb-7.meaningful::before,
	.p-tb-7.mention::before {
		padding-top: 7px;
	    padding-bottom: 7px;
	}
	.meaningful::before {    
		color: #d787ff;
		background-color: #d787ff;
	}
	.mention::before {
		color: #ff87eb;
		background-color: #ff87eb;
	}
	.m-all-1 {
		margin: 1em;
	}
	.m-l-1 {
		margin-left: 1em;
	}
	.m-r-0 {
		margin-right: 0;
	}
	.m-r-1 {
		margin-right: 1em;
	}
	.m-r-l {
		margin-right: 3em;

	}
	.m-t-1 {
		margin-top: 1em;
	}
	.m-b-3 {
		margin-bottom: 3em;
	}
	.m-t-3 {
		margin-top: 3em;
	}
	.m-t-5px {
		margin-top: 5px;
	}
	.p-t-5px {
		padding-top: 5px;
	}
	.p-t-10px {
		padding-top: 10px;
	}
	.p-t-0 {
		padding-top: 0;
	}
	.p-b-0 {
		padding-bottom: 0;
	}
	.text {
		display: inline;
		position: relative;
		top: -6px;
	}
	.center {
		text-align: center;
	}
	.right {
		text-align: right;
	}
	.summaryblue {
		color: #5071b4;
	}
	.fs165 {
		font-size: 1.65em;
	}
	.p-r-0 {
		padding-right: 0;
	}
	.w20 {
		width: 20%;
	}
	.w22 {
		width: 22%;
	}
	.w25 {
		width: 25%;
	}
	.w32 {
		width: 32%;
	}
	.w35 {
		width: 35%;
	}
	.w45 {
		width: 45%;
	}
	.w50 {
		width: 50%;
	}
	.w90 {
		width: 60%;
	}
	.books {
		display: block; 
		background-color: #aeaaa1;
		color: white;
		border-radius: 9px;
		padding-right: 15px;
		padding-left: 15px;
		padding-bottom: 15px;
		margin-right: 5px;
		margin-left: 5px;
	}
	.books h4 {
		padding-top: .6em;
	}
	.books li {
		margin-left: 1em;
		padding-top: 0;
		color: white;
		background-color: #aeaaa1;
	}
	
	.smeraldo {
		display: inline-block; 
		background-color: #D5D1C9;
		color: grey;
		border-radius: 9px;
		padding-right: 15px;
		padding-left: 15px;
		padding-bottom: 15px;
		margin-right: 5px;
		margin-left: 5px;
	}
	.smeraldo h4 {
		padding-top: .6em;
	}
	.smeraldo li {
		margin-left: 1em;
		padding-top: 0;
		color: grey;
		background-color: #D5D1C9;
	}

	/* new */
	body {
		display: flex;
		background-color: #D5D1C9;
		color: black;
		font-family: 'Alegreya SC', serif;
	}
	.lhs {
		width:61.5%;
	}
	.lhs img {
		width:100%;
	}
	.rhs {
		width: 38.5%;
		float: right;
		height: 575px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.col1, .col2 {
		width: 50%;
	}
	.right {
		float: right;
	}
	ul {
		padding-left: 0;
		margin-top: 0;
	}
	ul li {
		background: #F0ECE4;
		padding: .6em;
		/*  margin: .5em;  */
		list-style-type: none;
		border-radius: 9px;
	}
	.m-all-1half {
		margin: 1.5em;
	}
	.m-l-1 {
		margin-left: 1em;
	}
	.m-b-1 {
		margin-bottom: 1em;
	}
	.p-l-0 {
		padding-left: 0;
	}
	.p-l-1 {
		padding-left: 1em;
	}
	.p-r-2 {
		padding-right: 2em;
	}
	.title {
		float: right;
		margin-right: 2em;
		margin-bottom: .25em;
		margin-top: .25em;
		width: 100%;
		text-align: right;
		font-size: 1.5em;
		font-weight: bolder;
	}
	.bold {
		font-weight: bold;
	}
	.lht2 {
		line-height: 2;
	}
	.flex-container {
		display: flex;
	}
	.vw {
		font-size: 1vw;
	}
	.lyrics {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 30px;
		/*margin-left: 30px;*/
	  }
	.pblank {
		padding-right: 3em;
		padding-left: 3em;
	}
	m-t{
		padding-top: 3px;
	}
	a {
		color: black;
	}
	.trlink a{
		/*border-bottom: 2px solid #b676ff;*/
		text-decoration: none;
		color:  #544e61;
		font-weight: bold;
		margin-right: 1em;
	}
	.trlink a:hover {
		/*border-bottom: 2px solid #b676ff;*/
		text-decoration: none;
		color:  #b676ff;
		font-weight: bold;
	}
	.twtlink a:hover {
		/*border-bottom: 2px solid #b676ff;*/
		text-decoration: none;
		color:  #b676ff;
		font-weight: bold;
	}
	.flowerlink a{
		color:#544E61;
	}
	.flowerlink a:hover {
		/*border-bottom: 2px solid #b676ff;*/
		text-decoration: none;
		color:  #b676ff;
		font-weight: bold;
	}
	em {
		font-style: italic;
	}
	z{
		color:#544e61;
	}
	@media only screen and (max-width: 1000px) {
		.vw {
			font-size: 1em;
		}
		body {
			overflow: scroll;
		}
		.flex-container {
			flex-direction: column;
		}
		.lhs, .rhs {
			width: 100%;
			display: block;
		}
		.panel-title{
			font-size: 13.75px;
		}
	}